<template>
<div>
  <!-- 头部导航的公共组件 -->
  <head-view></head-view>
  <div class="goods">
    <!-- 标题选择 -->
    <div class="nav">
      <div class="w">
          <!-- v-for循环data中navList的数据，根据navList的 :class动态绑定-->
        <a @click="handleSort(i)" 
        :class="{active:i===isIndex}" href="javascript:;" 
        v-for="(navItem,i) in navList" :key="i" 
        style="margin-left: 20px; font-size: 18px;text-decoration: none;"
        >{{navItem.title}}</a>
        <!-- 区间价格 -->
        <div class="price-interval">
          <input type="number" class="input" placeholder="价格低" v-model="min">
          <span style="margin: 0 5px">-</span>
          <input type="number" placeholder="价格高" v-model="max">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="reset">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 内容卡片和页面选择 -->
    <div>
      <!-- 内容卡片 -->
      <div class="goods-box w">
        <mall-goods v-for="goods in allGoods" :key="goods.id" :goods="goods"></mall-goods>
      </div>
      <div class="w">
        <el-pagination style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[8, 20, 40, 80]" :page-size="size" layout="total,sizes, prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
  </div>
  <div style="margin-top:100px">
    <footer-view></footer-view>
  </div>
</div>
</template>

<script>
    import MallGoods from '@/components/MallGoods'
    export default {
        // 调用MallGoods组件
        components: {
            MallGoods,
        },
        data() {
            return {
                max: "",
                min: "",
                navList: [{
                    title: "销售排行"
                }, {
                    title: "价格由低到高"
                }, {
                    title: "价格由高到低"
                }],
                isIndex: 0,
                page: 1,
                size: 20,
                sort: '',
                total: '',
                // 所有商品数据
                allGoods: []
            };
        },
        created() {
            this.getAllGoods();
        },
        methods: {
            handleSizeChange(val) {
                this.size = val;
                this.getAllGoods();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getAllGoods();
            },
            async getAllGoods() {
                try {
                    //!!!URL一定要吧反单引号包起来
                    const res = await this.$http.get(`http://47.106.237.228:3001/api/home/allGoods?page=${this.page}&size=${this.size}&sort=${this.sort}&priceGt=${this.min}&priceLte=${this.max}`)
                        // console.log(this.page);
                        // console.log(res)
                    let allGoods = res.data.data;
                    this.allGoods = allGoods
                        // console.log(allGoods)
                    let total = res.data.total;
                    this.total = total
                        // console.log(total)
                } catch (error) {
                    console.log(error);

                }
            },
            priceSort(v) {
                this.sort = v;
                //console.log(sort)
                this.getAllGoods();
            },
            // 重置
            reset() {
                this.currentPage = 1;
                this.sort = '';
                this.getAllGoods();
            },
            handleSort(i) {
                this.isIndex = i;
                switch (i) {
                    case 0:
                        // 热门
                        this.reset();
                        break;
                    case 1:
                        //正序 
                        this.priceSort(1);
                        break;
                    case 2:
                        // 倒序
                        this.priceSort(-1);
                        break;
                    default:
                        break;
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "../../assets/style/mixin";
    @import "../../assets/style/theme";
    .goods {
        width: 1200px;
        margin-top: 20px;
        margin: 0 auto;
        background: linear-gradient(#fbfbfb, #ececec);
    }
    
    .nav {
        height: 60px;
        line-height: 60px;
        >div {
            display: flex;
            align-items: center;
            a {
                padding: 0 30px 0 0;
                height: 100%;
                @extend %block-center;
                font-size: 12px;
                color: #999;
                &.active {
                    color: #5683ea;
                }
                &:hover {
                    color: #5683ea;
                }
            }
            input {
                @include wh(80px, 30px);
                border: 1px solid #ccc;
            }
            input+input {
                margin-left: 10px;
            }
        }
        .price-interval {
            padding: 0 15px;
            @extend %block-center;
            input[type="number"] {
                border: 1px solid #ccc;
                text-align: center;
                background: none;
                border-radius: 5px;
            }
        }
    }
    
    .goods-box {
        overflow: hidden;
        >div {
            float: left;
            border: 1px solid #efefef;
        }
    }
    
    .no-info {
        padding: 100px 0;
        text-align: center;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        .no-data {
            align-self: center;
        }
    }
    
    .img-item {
        display: flex;
        flex-direction: column;
    }
    
    .el-pagination {
        align-self: flex-end;
        margin: 3vw 10vw 2vw;
    }
    
    .section {
        padding-top: 8vw;
        margin-bottom: -5vw;
        width: 1218px;
        align-self: center;
    }
    
    .recommend {
        display: flex;
        >div {
            flex: 1;
            width: 25%;
        }
    }
</style>